<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
    <script src="https://cdn.suoluomei.com/common/js2.0/city-data/city-data.js"></script>
    <style>
        .el-select {
            width: 200px;
        }

        .el-input {
            width: 200px;
        }

        #text1 {
            vertical-align: middle
        }

    </style>
</head>
<body>
<div id="orderPreview">
    <template>
        <span class="demonstration">收货地址:</span>
        <el-select v-model="addressId" placeholder="请选择">
            <el-option
                    v-for="item in addressList"
                    :key="item.id"
                    :label="'收货：'+item.receiveName+'  '+item.tel"
                    :value="item.id">收货地址：{{item.address}} 收货人：{{item.receiveName}} 联系电话：{{item.tel}}
            </el-option>
        </el-select>
        <span style="float: right">
            <span class="demonstration">新增地址:</span>
            <el-cascader v-model="area" :options="areaList" :props="optionProps" filterable
                         ref="myCascader" placeholder="请选择地址"></el-cascader>
        <el-input type="text" v-model="detailAddress" placeholder="详细地址" autocomplete="off"></el-input>
        <el-input type="text" v-model="receiveName" placeholder="收货人" autocomplete="off"></el-input>
        <el-input type="text" v-model="tel" placeholder="联系电话" autocomplete="off"></el-input>
        <el-button type="success" @click="addAddress()">确定</el-button>
        </span>
    </template>
    <el-table
            :data="orderPreviewList"
            tooltip-effect="dark"
            style="width: 100%">
        <!--      <el-table-column
                      label="商品编号"
                      width="240">
                  <template slot-scope="scope">{{ scope.row.productId }}</template>
              </el-table-column>-->
        <el-table-column
                label="店铺"
                width="200">
            <template slot-scope="scope">
                <!--<span id="text1" style="color: darkslateblue;">{{scope.row.shopName}}</span>-->
                <el-image id="img1" :src="scope.row.shopImgSrc" style="width: 50px;height: 50px;"></el-image>
            </template>
        </el-table-column>
        <el-table-column
                prop="shopName"
                label="店铺名称"
                width="200">
        </el-table-column>
        <el-table-column
                prop="productName"
                label="商品名称"
                width="240">
        </el-table-column>
        <el-table-column
                label="商品图片"
                width="240">
            <template slot-scope="scope">
                <el-image :src="scope.row.productImgSrc" style="width: 180px;height: 150px"></el-image>
            </template>
        </el-table-column>
        <el-table-column
                prop="productPrice"
                label="单价"
                width="200">
        </el-table-column>
        <el-table-column
                prop="count"
                label="数量"
                width="200">
        </el-table-column>
        <el-table-column
                prop="sumPrice"
                label="小计"
                width="200">
        </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
        <span class="demonstration">总计为：  {{totalPrice}}  (元)  </span>
        <el-button type="success" @click="goOrder()">下单</el-button>
    </div>
</div>
<script>
    var orderPreview = new Vue({
        el: "#orderPreview",
        data: {
            areaList: rawCitiesData,
            area: [],
            optionProps: { //配置节点
                value: 'name',
                label: 'name',
                children: 'sub'
            },
            addressList: [],
            addressId: "请选择",
            ids: [],
            orderPreviewList: [],
            totalPrice: 0.00,
            receiveName: '',
            tel: '',
            detailAddress: ''
        },
        methods: {
            test1() {
                alert(this.addressId)
            },
            initAddress() {
                var vueObj = this;
                $.post("/address/selectAllAddress", function (data) {
                    vueObj.addressList = data
                    //确认默认地址的id
                    for (let address of data) {
                        if (address.status == 1) {
                            vueObj.addressId = address.id;
                            break;
                        }
                    }
                });
            },
            open() {
                /*    var context='<span class=\"demonstration\" v-text="area">这是啥</span>';
                    this.$alert(context, '地址', {
                        dangerouslyUseHTMLString: true
                    });*/
            },
            initOrderPreview() {
                var vueObj = this;
                $.post("/cartitem/createOrderPreview", {productIds: this.ids}, function (data) {
                    vueObj.orderPreviewList = data.cartitemList
                    vueObj.totalPrice = data.totalPrice
                });
            },
            goOrder() {
                var param = {
                    productIds: this.ids,
                    addressId: this.addressId
                } //生成订单开始计时
                if(this.addressId=="请选择"){
                    this.meassageAlert("请选择地址", "warning");
                    return;
                }
                $.post("/orderitem/createOrder", param, function (data) {
                    if (data == "ok") {
                      //  window.parent.app.work = "<iframe frameborder=0 width=100% height=100% src='order.html'></iframe>";
                        window.parent.app.openWork("order.html");
                    }
                })

            },
            addAddress() {
                if (this.area.length < 3) {
                    this.meassageAlert("请选择您的地址", "warning");
                    return;
                }
                if (this.detailAddress.length==0) {
                    this.meassageAlert("请输入详细地址", "warning");
                    return;
                }
                if (this.receiveName.length == 0) {
                    this.meassageAlert("请输入收货人姓名", "warning");
                    return;
                }
                if (this.tel.length == 0) {
                    this.meassageAlert("请输入手机号码", "warning");
                    return;
                }
                var vueObj = this;
                var param = {
                    area: this.area,
                    receiveName: this.receiveName,
                    tel: this.tel,
                    detailAddress: this.detailAddress
                }
                $.post("/address/addAddress", param, function (data) {
                    if (data == "ok") {
                        vueObj.initAddress();
                        vueObj.meassageAlert("添加成功", "success");
                    }
                });
            },
            meassageAlert(context, type) {
                this.$message({
                    showClose: true,
                    message: context,
                    type: type
                });
            },
        },
        created() {
            this.initAddress()
            this.ids = window.parent.app.ids;
            this.initOrderPreview();
        }

    });
</script>
</body>
</html>
